<template>
    <div class="wrapper">
        <table class="detail-table" style="width: 70%; margin: 5px auto">
            <tr>
                <th>文件名</th>
                <td>{{ fileInfo.name }}</td>
            </tr>
            <tr>
                <th>文件类型</th>
                <td>{{ fileInfo.type }}</td>
            </tr>
            <tr>
                <th>上传者</th>
                <td>{{ fileInfo.uploader }}</td>
            </tr>
            <tr>
                <th>文件大小(KB)</th>
                <td>{{ fileInfo.size }}</td>
            </tr>
            <tr>
                <th>文件描述</th>
                <td class="content">{{ fileInfo.description }}</td>
            </tr>
        </table>
        <div style="display: flex; justify-content: space-around;width: 80%; margin: 25px auto">
            <el-button type="info" size="medium" style="width: 135px;" @click="$router.back()">返回</el-button>
            <el-button type="success" size="medium" style="width: 135px;" @click="preview(fileInfo.url)">预览</el-button>
            <el-button type="warning" size="medium" style="width: 135px;" @click="download(fileInfo.url)">下载</el-button>
        </div>
    </div>
</template>

<script>
    export default {
        name: "FileDetails",
        data () {
            return {
                fileInfo: {}
            }
        },
        created () {
            // 注意不是router!
            this.getFile(this.$route.query.id)
        },
        methods: {
            getFile (id) {
                this.request.get('/file/info/' + id).then(res => {
                    if (res.code === '200') {
                        this.fileInfo = res.data
                    } else {
                        this.$message.error('获取文件信息失败!')
                    }
                })
            },
            preview (url) {
                window.open('https://file.keking.cn/onlinePreview?url=' + encodeURIComponent(window.btoa((url))))
            },
            download (url) {
                window.open(url)
            }
        }
    }
</script>

<style scoped>
    .wrapper {
        width: 100%;
        height: 100vh;
        padding: 50px;
    }
    table.detail-table {
        border-collapse: collapse;
        box-shadow: 2px 0 6px rgb(0 21 41 / 35%);
    }
    table,th,td {
        border: 1px solid #999999;
    }
    table td {
        text-align: center;
    }
    table tr {
        height: 60px;
    }
    table tr:last-child {
        height: 120px;
    }
    td.content {
        overflow: auto;
        padding-left: 10px;
        padding-right: 10px;
    }
    th {
        width: 25%;
    }
</style>